<!--
 * @Author: gaotang
 * @Date: 2024年12月27日
 * @Email: qq23745038@126.com
 * @LastEditors: gaotang
 * @LastEditTime: 2024-12-27 15:35:39
-->
<template>
  <div class="contents" @click.stop="otherclick">
    <div class="mapwrap">
      <transition name="custom-classes-transition" enter-active-class="animate__animated animate__headShake"
        leave-active-class="animate__animated animate__zoomOut">
        <ItemWrap v-if="showData" :style="{ left: offsetX, top: offsetY }" style="height: 305px; width: 620px"
          class="dialog" :title="mapTitle" @click.native.stop="isMapClick = false">
          <div class="close"
            @click.stop="showData = false; showLeftTopLine = false; showLeftBottomSort = false; showLeftBottomCenter = false; showLeftBottomRight = false; showRightRightTop = false; showRightLeftCenter = false; showRightCenterTop = false">
            <i class="el-input__icon el-icon-close"></i>
          </div>
          <MapData v-if="showLeftTopLine" :type="positionName" :chooseType="chooseType" />
          <MapDataBottomLeft v-if="showLeftBottomSort" />
          <MapDataBottomCenter v-if="showLeftBottomCenter" />
          <MapDataBottomRight v-if="showLeftBottomRight" />
          <MapDataTopRightRight v-if="showRightRightTop" />
          <MapDataCenterRightLeft v-if="showRightLeftCenter" :chooseType="chooseType" />
          <MapDataTopRightCenter v-if="showRightCenterTop" />
        </ItemWrap>
      </transition>
    </div>
    <div class="content_left">
      <div class="pagetab"></div>
      <div class="content_left-one animate__animated animate__fadeInLeft"
        style="animation-duration: 1s; animation-delay: .3s;">
        <ItemWord class="content_lr-item" title="市场交易额" style="height: 280px">
          <LeftLeftTop @chartClick="chartClick" />
        </ItemWord>
        <ItemWord class="content_lr-item" title="批发市场规模" style="height: 280px">
          <LeftLeftCenter @chartClick="chartClick" />
        </ItemWord>
        <ItemWord class="content_lr-item" title="商城发展指数" style="height: 280px">
          <LeftLeftBottom @chartClickSort="chartClickSort" />
        </ItemWord>
      </div>
      <div class="content_left-two animate__animated animate__fadeInLeft"
        style="animation-duration: 1s; animation-delay: .4s;">
        <ItemWord class="content_lr-item" title="物流总额" style="height: 280px">
          <LeftCenterTop @chartClick="chartClick" />
        </ItemWord>
        <ItemWord class="content_lr-item" title="物流资源规模" style="height: 280px">
          <LeftCenterCenter />
        </ItemWord>
        <ItemWord class="content_lr-item" title="物流园区活跃度" style="height: 280px">
          <LeftCenterBottom @chartClick="chartClick" />
        </ItemWord>
      </div>
      <div class="content_left-three animate__animated animate__fadeInLeft"
        style="animation-duration: 1s; animation-delay: .5s;">
        <ItemWord class="content_lr-item" title="网络零售额" style="height: 280px">
          <LeftRightTop @chartClick="chartClick" />
        </ItemWord>
        <ItemWord class="content_lr-item" title="快递" style="height: 280px">
          <LeftRightCenter />
        </ItemWord>
        <ItemWord class="content_lr-item" title="线路活跃度" style="height: 280px">
          <LeftRightBottom @chartClick="chartClick" />
        </ItemWord>
      </div>
    </div>
    <div class="content_center">
      <CenterTopStatic class="content_center_top animate__animated animate__bounce"
        style="animation-duration: 1s; animation-delay: .3s;" />
    </div>
    <div class="content_right">
      <div class="content_right-three animate__animated animate__fadeInRight"
        style="animation-duration: 1s; animation-delay: .5s;">
        <ItemWord class="content_lr-item" title="运输货量规模" style="height: 280px">
          <RightLeftTop @chartClick="chartClick" />
        </ItemWord>
        <ItemWord class="content_lr-item" title="运输时效" style="height: 280px;z-index: 2;">
          <RightLeftCenter @chartClick="chartClick" />
        </ItemWord>
        <ItemWord class="content_lr-item" title="保险" style="height: 280px">
          <RightLeftBottom />
        </ItemWord>
      </div>
      <div class="content_right-two animate__animated animate__fadeInRight"
        style="animation-duration: 1s; animation-delay: .4s;">
        <ItemWord class="content_lr-item" title="货物品类占比" style="height: 280px">
          <RightCenterTop @chartClick="chartClick" />
        </ItemWord>
        <ItemWord class="content_lr-item" title="仓储资源" style="height: 280px;">
          <RightCenterCenter />
        </ItemWord>
        <ItemWord class="content_lr-item" title="金融" style="height: 280px">
          <RightCenterBottom />
        </ItemWord>
      </div>
      <div class="content_right-one animate__animated animate__fadeInRight"
        style="animation-duration: 1s; animation-delay: .3s;">
        <ItemWord class="content_lr-item" title="运输成本" style="height: 280px">
          <RightRightTop @chartClick="chartClick" />
        </ItemWord>
        <ItemWord class="content_lr-item" title="园区智能化" style="height: 280px">
          <RightRightCenter />
        </ItemWord>
        <ItemWord class="content_lr-item" title="加油站加油量排名" style="height: 280px">
          <RightRightBottom />
        </ItemWord>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import LeftLeftTop from './left-left-top.vue';
import LeftLeftCenter from './left-left-center.vue';
import LeftLeftBottom from './left-left-bottom.vue';

import LeftCenterTop from './left-center-top.vue';
import LeftCenterCenter from './left-center-center.vue';
import LeftCenterBottom from './left-center-bottom.vue';

import LeftRightTop from './left-right-top.vue';
import LeftRightCenter from './left-right-center.vue';
import LeftRightBottom from './left-right-bottom.vue';

import CenterTopStatic from './center-top-static.vue';

import RightLeftTop from './right-left-top.vue';
import RightLeftCenter from './right-left-center.vue';
import RightLeftBottom from './right-left-bottom.vue';

import RightCenterTop from './right-center-top.vue';
import RightCenterCenter from './right-center-center.vue';
import RightCenterBottom from './right-center-bottom.vue';

import RightRightTop from './right-right-top.vue';
import RightRightCenter from './right-right-center.vue';
import RightRightBottom from './right-right-bottom.vue';

import MapData from './modal/map-data.vue';
import MapDataBottomLeft from './modal/map-data-bottom-left.vue';
import MapDataBottomCenter from './modal/map-data-bottome-center.vue';
import MapDataBottomRight from './modal/map-data-bottom-right.vue';
import MapDataTopRightRight from './modal/map-data-top-right-right.vue';
import MapDataCenterRightLeft from './modal/map-data-center-left.vue';
import MapDataTopRightCenter from './modal/map-data-top-right-center.vue'
export default {
  components: {
    LeftLeftTop,
    LeftLeftCenter,
    LeftLeftBottom,
    LeftCenterTop,
    LeftCenterCenter,
    LeftCenterBottom,
    LeftRightTop,
    LeftRightCenter,
    LeftRightBottom,
    CenterTopStatic,
    RightLeftTop,
    RightLeftCenter,
    RightLeftBottom,
    RightCenterTop,
    RightCenterCenter,
    RightCenterBottom,
    RightRightTop,
    RightRightCenter,
    RightRightBottom,
    MapData,
    MapDataBottomLeft,
    MapDataBottomCenter,
    MapDataBottomRight,
    MapDataTopRightRight,
    MapDataCenterRightLeft,
    MapDataTopRightCenter
  },
  computed: {
    ...mapGetters(['setting']),
    // ...mapGetters("setting", ["hasPageNo"]),
  },
  data() {
    return {
      mapTitle: '年月市场交易额变化趋势',
      offsetX: 0,
      offsetY: 0,
      showData: false,
      isMapClick: false,
      showLeftTopLine: false, //左半顶部三个显示
      showLeftBottomSort: false,//左-左下弹窗显示
      showLeftBottomCenter: false,//物流园区活跃度
      showLeftBottomRight: false,//线路活跃度
      // showRightLeftTop:false,
      showRightRightTop: false, //运输成本
      showRightLeftCenter: false,//运输时效
      showRightCenterTop: false,//货物品类占比
      positionName: ''
    };
  },
  methods: {
    chartClick(params, title, positionName) {
      console.log('点击的数据:', params, params.barChoose);
      this.isMapClick = true;
      this.showLeftTopLine = false;
      this.showLeftBottomSort = false;
      this.showLeftBottomCenter = false;
      this.showLeftBottomRight = false;
      const { name, event } = params;
      this.mapTitle = name + title;
      this.positionName = '';
      switch (positionName) {
        case 'LeftLeftTop':
          this.showLeftTopLine = true;
          this.offsetX = event.offsetX + 10 + 'px';
          this.offsetY = event.offsetY + 40 + 'px';

          this.mapTitle = name + '年市场交易额';
          this.positionName = positionName;
          break;
        case 'LeftCenterTop':
          this.showLeftTopLine = true;
          this.offsetX = event.offsetX + 440 + 'px';
          this.offsetY = event.offsetY + 40 + 'px';

          this.mapTitle = name + '年物流总额';
          this.positionName = positionName;
          break;
        case 'LeftRightTop':
          this.showLeftTopLine = true;
          this.offsetX = event.offsetX + 870 + 'px';
          this.offsetY = event.offsetY + 40 + 'px';

          this.mapTitle = name + '年网络零售额';
          this.positionName = positionName;
          break;
        case 'LeftCenterBottom':
          this.showLeftBottomCenter = true
          // this.showLeftTopLine = false;
          // this.showLeftBottomSort = false;
          this.offsetX = event.offsetX + 430 + 'px';
          this.offsetY = event.offsetY + 490 + 'px';
          break;
        case 'LeftRightBottom':
          this.showLeftBottomRight = true
          // this.showLeftTopLine = false;
          // this.showLeftBottomSort = false;
          // this.showLeftBottomCenter=false;
          this.offsetX = event.offsetX + 870 + 'px';
          this.offsetY = event.offsetY + 490 + 'px';
          break;
        case 'RightLeftTop':
          this.showLeftTopLine = true
          // this.showLeftTopLine = false;
          // this.showLeftBottomSort = false;
          // this.showLeftBottomCenter=false;
          this.chooseType = params.barChoose;
          this.offsetX = event.offsetX + 2720 + 'px';
          this.offsetY = event.offsetY + 40 + 'px';
          break;
        case 'RightRightTop': //运输成本
          this.mapTitle = name + title;
          this.showRightRightTop = true
          this.showRightLeftCenter = false
          // this.showLeftTopLine = false;
          // this.showLeftBottomSort = false;
          // this.showLeftBottomCenter=false;
          this.offsetX = event.offsetX + 3470 + 'px';
          this.offsetY = event.offsetY + 40 + 'px';
          break;
        case 'RightLeftCenter': //运输时效
          this.mapTitle = name + title;
          this.showRightLeftCenter = true
          this.showRightRightTop = false
          // this.showLeftTopLine = false;
          // this.showLeftBottomSort = false;
          // this.showLeftBottomCenter=false;
          this.offsetX = event.offsetX + 2720 + 'px';
          this.offsetY = event.offsetY + 340 + 'px';
          break;
        case 'RightCenterTop': //货物品类占比
          this.mapTitle = name + title;
          this.showRightCenterTop = true
          // this.showLeftTopLine = false;
          // this.showLeftBottomSort = false;
          // this.showLeftBottomCenter=false;
          this.offsetX = event.offsetX + 3320 + 'px';
          this.offsetY = event.offsetY + 40 + 'px';
          break;

        default:
          break;
      }
      this.showData = true;
    },
    //商城发展指数下钻数据展示
    chartClickSort(params) {
      console.log('点击的数据:', params);
      this.isMapClick = true;
      this.showLeftTopLine = false;
      this.showLeftBottomSort = true;
      this.showLeftBottomCenter = false;

      this.showLeftBottomRight = false;//线路活跃度
      // showRightLeftTop:false
      this.showRightRightTop = false; //运输成本
      this.showRightLeftCenter = false;//运输时效
      this.showRightCenterTop = false;//货物品类占比
      const { name, event } = params;
      this.mapTitle = `${name}分类商品指数变化趋势`;
      this.offsetX = event.offsetX + 10 + 'px';
      this.offsetY = event.offsetY + 490 + 'px';
      this.showData = true;
    },
    otherclick() {
      if (!this.isMapClick) {
        this.showData = false;
      }
      this.isMapClick = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import '~animate.css/animate.css';

.animate__borderBlink {
  animation: borderBlink 1s infinite;
}

@keyframes borderBlink {
  0% {
    border-bottom: 1px solid red;
  }

  50% {
    border-bottom: 1px solid blue;
  }

  100% {
    border-bottom: 1px solid red;
  }
}

.contents {

  // position: relative;
  // top: 0;
  .mapwrap {
    margin-top: -20px;
    margin-bottom: -50px;
    height: 580px;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    // border: 1px solid red;

    .close {
      position: absolute;
      right: 15px;
      top: 10px;
      cursor: pointer;
    }

    .dialog {
      width: 400px;
      height: 200px;
      position: absolute;
      z-index: 999;
    }
  }

  .content_left,
  .content_right {
    width: 1360px;
    box-sizing: border-box;
    margin-top: -30px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-around;
    position: relative;
  }

  .content_left {
    margin-left: 10px;
  }

  .content_right {
    margin-right: 10px;
  }

  // 中间
  .content_center {
    width: 1360px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  //左右两侧 三个块
  .content_lr-item {
    // width: 95%;
  }

  .content_center_top {
    width: 100%;
    height: 105px;
  }

  .content_left-one,
  .content_left-two,
  .content_left-three,
  .content_right-one,
  .content_right-two,
  .content_right-three {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    width: 450px;
  }

  // .content_left-one,
  // .content_right-one {
  //   width: 520px;
  // }

  // .content_left-three,
  // .content_right-three {
  //   width: 580px;
  // }
}

@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }

  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }

  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>
